<template>
  <div class="project_tag_list">
    <div class="top_con">
      <a-button @click="goBack">返回</a-button>
      <span v-if="projectName && projectName !== '-undefined'" style="margin-left: 10px">项目 {{ projectName }}</span>
      <div class="search-area">
        <div class="n-grid">
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">文件夹名称</a-button>
              <a-input placeholder="请输入" v-model:value="pageInfo.folder_name" style="width: calc(100% - 140px)" />
            </div>
          </div>
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">文件类型</a-button>
              <a-select placeholder="请选择" allowClear v-model:value="pageInfo.folder_type"
                style="width: calc(100% - 140px)">
                <a-select-option v-for="(item, index) in typeList" :value="item.value" :key="index">{{ item.label
                  }}</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">文件名</a-button>
              <a-input placeholder="请输入" v-model:value="pageInfo.material_name" style="width: calc(100% - 140px)" />
            </div>
          </div>
          <div class="n-grid-item" v-if="isExpend">
            <div class="n-input-group">
              <a-button style="width: 130px">标签</a-button>
              <a-select v-model:value="tag_group_id" mode="multiple" allowClear @focus="getTagOptionList"
                @change="changeTag" placeholder="请选择标签" :max-tag-count="1" :options="selectTagList"
                style="width: calc(100%)">
                <template #maxTagPlaceholder="omittedValues">
                  <span style="color: red">+ {{ omittedValues.length }}...</span>
                </template>
              </a-select>
            </div>
          </div>
          <div class="n-grid-item last-gird-item">
            <div class="n-input-group grid-btn">
              <a-button style="border-radius: 5px" type="primary" @click="queryThis('all')">查询</a-button>
              <a-button style="margin-left: 10px; border-radius: 5px" @click="queryThis('clear')">重置</a-button>
              <a-button type="link" @click="expendGird" class="toggle-button">
                <DownOutlined v-if="!isExpend" />
                <UpOutlined v-else />
                <span>{{ isExpend ? "收起" : "展开" }}</span>
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-table style="margin-top: 10px" :loading="tableLoading" :dataSource="tableList" :columns="tabColumns"
      :pagination="pagination" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'project_name'">
          {{ record.project_name ? record.project_name : "--" }}
        </template>
        <template v-if="column.key === 'group_name'">
          {{ record.group_name ? record.group_name : "--" }}
        </template>
        <template v-if="column.key === 'file'">
          <img @click="previewThis(record)" style="max-height: 50px; max-width: 50px"
            v-if="record?.folder_type == 'image'" :src="record?.material_url" />
          <video @click="previewThis(record)" style="max-height: 50px; max-width: 50px; background-color: #000"
            v-if="record?.folder_type == 'video'" :src="record?.material_url" />
          <a-button style="padding: 0" type="link" v-if="record?.folder_type == 'audio'"
            @click="previewThis(record)">音频文件</a-button>
        </template>
        <template v-if="column.key === 'associate_tag'">
          <a-tag v-for="(item, index) in record?.bind_tags">{{
            item?.tag?.name
          }}</a-tag>
          <span v-if="record?.bind_tags?.length == 0">--</span>
        </template>
      </template>
    </a-table>
  </div>

  <!-- 预览图片 -->
  <PreviewModal :material_item="{}" :visible="visibleImage" @onCancel="visibleImage = false" :url="previewImgUrl"
    :title="previewTitle" :type="typeChange" />
  <swiperPreview :visible="swiperVisible" :coverArr="imageArr" @close="(swiperVisible = false), (imageArr = [])" />
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import PreviewModal from "../../../../../components/PreviewModal/index.vue";
import swiperPreview from "../../../MaterialCenter/swiperPreview.vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";


export default defineComponent({
  components: {
    PreviewModal,
    swiperPreview,
    DownOutlined,
    UpOutlined,
  },
  emits: ["back"],
  props: {
    multimedia_id: {
      type: [Number, String],
      default: 0,
    },
    merchant_library_id: {
      type: [Number, String],
      default: 0,
    },
    group_id: {
      type: [Number, String],
      default: 0,
    },
    projectName: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {

    // 获取当前路由
    const state = reactive({
      visibleImage: false,
      previewImgUrl: "",
      previewTitle: "",
      typeChange: "image",

      swiperVisible: false,
      imageArr: [],

      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
      },
      pageInfo: {
        folder_name: null,
        folder_type: null,
        material_name: null,
      },
      tableList: [],
      tabColumns: [
        {
          title: "项目名称",
          dataIndex: "project_name",
          key: "project_name",
        },
        {
          title: "目录名称",
          dataIndex: "group_name",
          key: "group_name",
        },
        {
          title: "文件夹名称",
          dataIndex: "folder_name",
          key: "folder_name",
        },
        {
          title: "文件类型",
          dataIndex: "folder_type_text",
          key: "folder_type_text",
        },
        {
          title: "文件名",
          dataIndex: "material_name",
          key: "material_name",
        },
        {
          title: "",
          dataIndex: "file",
          key: "file",
        },
        {
          title: "关联标签",
          dataIndex: "associate_tag",
          key: "associate_tag",
        },
      ],

      addVisible: false,
      labelInfo: {},
      tableLoading: false,
      typeList: [
        {
          label: "视频",
          value: "video",
        },
        {
          label: "音频",
          value: "audio",
        },
        {
          label: "图片",
          value: "image",
        },
        // {
        // 	label: '文字',
        // 	value: 'text'
        // },
      ],
      tag_group_id: [],
      selectTagList: [],
      isExpend: false,
      tag_ids: "",
    });
    const getTableList = () => {
      state.tableLoading = true;
      request
        .get("/work_ai", "/user/shotstack/multimedia/listTags", {
          page: state.pagination.current,
          pageSize: state.pagination.pageSize,
          multimedia_id: props.multimedia_id,
          merchant_library_id: props.merchant_library_id,
          group_id: props.group_id,
          tag_ids: state.tag_ids,
          ...state.pageInfo,
        })
        .then((res) => {
          state.tableLoading = false;
          state.tableList = res.result.data;
          state.pagination.total = res.result.total;
        })
        .catch((err) => {
          state.tableLoading = false;
        });
    };

    const handleTableChange = ({ current, pageSize }) => {
      state.pagination.current = current;
      state.pagination.pageSize = pageSize;
      getTableList();
    };

    const handleAddClose = () => {
      state.addVisible = false;
      state.labelInfo = {};
    };

    const queryThis = (type) => {
      state.pagination.current = 1;
      state.pagination.pageSize = 10;
      state.pagination.total = 0;
      if (type == "clear") {
        state.pageInfo = {
          folder_name: null,
          folder_type: null,
          material_name: null,
        };
        state.tag_ids = "";
        state.tag_group_id = [];
      }
      getTableList();
    };

    const router = useRouter();
    const currentRoute = useRoute();

    const goBack = () => {
      if(currentRoute.query?.id && Object.keys(currentRoute.query ?? {}).length > 0) {
        
        router.push({
        name: "ComposeMaterial",
        query: { id: currentRoute.query.id },
      });
      }else{
        context.emit("back");
      }
    };

    const previewThis = (record) => {
      if (record?.image_ary && record?.image_ary?.length) {
        state.swiperVisible = true;
        state.imageArr = record?.image_ary;
        return;
      }
      state.visibleImage = true;
      state.previewImgUrl = record?.material_url;
      state.previewTitle = record?.material_name;
      state.typeChange = record?.folder_type;
    };
    // 获取标签下拉列表
    const getTagOptionList = () => {
      state.tableLoading = true;
      request
        .get("/work_ai", "/user/shotstack/multimedia/tag/all")
        .then((res) => {
          state.tableLoading = false;
          state.selectTagList = res.result?.map((item) => ({
            label: item.name,
            value: item.id,
          }));
        })
        .catch((err) => {
          state.tableLoading = false;
          message.error("获取标签列表失败");
          return err;
        });
    };
    const changeTag = (val) => {
      if (val && val.length) {
        state.tag_ids = val?.join(",");
      }
    };
    const expendGird = () => {
      state.isExpend = !state.isExpend;
    };
    watch(
      [() => props.group_id, () => props.merchant_library_id],
      (val) => {
        queryThis("clear");
      },
      {
        immediate: true,
      }
    );


    return {
      ...toRefs(state),
      changeTag,
      handleTableChange,
      getTagOptionList,
      queryThis,
      handleAddClose,
      goBack,
      previewThis,
      expendGird,
    };
  },
});
</script>

<style lang="less" scoped>
.project_tag_list {
  padding: 20px;
  // padding-top: 0;
  background-color: #fff;

  .search_con {
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
  }

  .search-area {
    // min-width: 1200px;
    margin-top: 10px;

    button {
      border-radius: 5px 0 0 5px;
    }

    .ant-input-affix-wrapper {
      border-radius: 0 5px 5px 0;
    }

    .ant-select {
      border-radius: 0 5px 5px 0;
    }
  }

  /* 当屏幕宽度大于等于 1200px 时应用的样式 */
  @media screen and (min-width: 1200px) {

    /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
    .n-grid {
      margin-top: 20px;
      display: grid;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, minmax(0px, 1fr));
      gap: 20px 16px;
    }

    .last-gird-item {
      grid-column: 4 / span 1 !important;
      display: flex;
      justify-content: flex-end;
    }
  }

  /* 当屏幕宽度小于 1199px 时应用的样式 */
  @media screen and (max-width: 1199px) {

    /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
    .n-grid {
      margin-top: 20px;
      display: grid;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0px, 1fr));
      gap: 20px 16px;

      .last-gird-item {
        grid-column: 2 / span 1;
      }
    }
  }

  .n-input-group {
    display: inline-flex;
    width: 100%;
    flex-wrap: nowrap;
    vertical-align: bottom;
  }

  .n-grid-item {
    grid-column: span 1 / span 1;
  }

  .hidden-grid-item {
    display: none;
  }

  .grid-btn {
    display: flex;
    justify-content: flex-end;
  }

  :deep(.ss-select-selection-overflow) {
    flex-wrap: nowrap !important;
    overflow: hidden;
  }
}
</style>
